<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"/>
<title>群聊 · Purple Galaxy</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" href="./css/chat_background.css">
<style>
/* 新增样式：用户名 */
.bubble {
    position: relative;
    margin-top: 25px; /* 为名字预留空间 */
}
.bubble .username {
    position: absolute;
    top: -20px;
    font-size: 12px;
    color: #aaa;
    white-space: nowrap;
}
.bubble.other .username {
    left: 10px;
}
.bubble.me .username {
    right: 10px;
}
.bubble.system {
    margin-top: 10px;
}
</style>
</head>
<body>

<!-- 聊天主体 -->
<div class="chat-wrapper">
    <div class="chat-header">Purple Galaxy · 群聊</div>

    <div class="chat-body" id="chatBody">
        <div class="bubble system">李银河 加入群聊</div>

        <div class="bubble other">
            <span class="username">UI小琪</span>
            各位，新视觉稿已经上传到 Figma 啦！
        </div>

        <div class="bubble me">
            <span class="username">我</span>
            收到，我这就去 Review，配色很赞！
        </div>

        <div class="bubble other">
            <span class="username">UI小琪</span>
            👍👍 紫-靛渐变果然耐看
        </div>
    </div>

    <div class="chat-footer">
        <input id="msgInput" type="text" placeholder="说点什么…" maxlength="300"/>
        <button class="send-btn" id="sendBtn" onclick="sendMassage()">
            <svg viewBox="0 0 24 24"><path d="M2 21l21-9L2 3v7l15 2-15 2z"/></svg>
        </button>
    </div>
</div>

<script src="./js/chat_Bubble.js"></script>
<script src="./js/all_ws.js"></script>
</body>
</html>